<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-07 15:24:22
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-15 16:28:06
-->
<template>
  <div class="content">
    <div class="top">
      <div class="title">平台项目汇总情况</div>
      <el-cascader
        ref="areas"
        v-model="area"
        :options="areasOptions"
        @change="getAreaId"
        placeholder="请选择"
        :props="{ checkStrictly: true }"
      ></el-cascader>
    </div>
    <div class="detailBox">
      <el-row :gutter="10" class="elRow" style="margin-top: 0">
        <el-col :span="12" class="elCol">
          <div class="subBox">
            <el-row class="title dotTheme">项目工程进度情况</el-row>
            <el-row class="detail">
              <el-col :span="6">
                <p class="info">{{ progressData.total | splitNumber }}</p>
                <p class="desc">合计</p>
              </el-col>
              <el-col
                :span="6"
                v-for="item in progressData.result || [
                  { name: '在建' },
                  { name: '完工' },
                  { name: '停工' },
                ]"
                :key="item.name"
              >
                <p class="info">{{ item.value | splitNumber }}</p>
                <p class="desc">{{ item.name || '--' }}</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" class="elCol">
          <div class="subBox">
            <el-row class="title dotTheme">工人工资发放情况</el-row>
            <el-row class="detail">
              <el-col :span="6">
                <p class="info">
                  {{ salaryData.shouldPay | splitNumber }} 万元
                </p>
                <p class="desc">应发工资</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ salaryData.actPay | splitNumber }} 万元</p>
                <p class="desc">已发工资</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ salaryData.deprive | splitNumber }} 万元</p>
                <p class="desc">扣发工资</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="elRow">
        <el-col :span="12" class="elCol">
          <div class="subBox">
            <el-row class="title dotTheme">实名制用工情况</el-row>
            <el-row class="detail">
              <el-col :span="6">
                <p class="info">{{ realnameData.tatal | splitNumber }}</p>
                <p class="desc">合计</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ realnameData.onJob | splitNumber }}</p>
                <p class="desc">在场</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ realnameData.outJob | splitNumber }}</p>
                <p class="desc">退场</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" class="elCol">
          <div class="subBox">
            <el-row class="title dotTheme">实名制考勤情况</el-row>
            <el-row class="detail">
              <el-col :span="6">
                <p class="info">{{ checkworkData.emps | splitNumber }}</p>
                <p class="desc">累计出勤人次</p>
              </el-col>
              <el-col :span="6">
                <p class="info">
                  {{ checkworkData.yesterdayProjects | splitNumber }}
                </p>
                <p class="desc">昨日考勤项目数</p>
              </el-col>
              <el-col :span="6">
                <p class="info">
                  {{ checkworkData.yesterdayEmps | splitNumber }}
                </p>
                <p class="desc">昨日考勤人次</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="elRow">
        <el-col :span="12" class="elCol">
          <div class="subBox">
            <el-row class="title dotTheme">专户资金流水情况</el-row>
            <el-row class="detail">
              <el-col :span="6">
                <p class="info">{{ accountData.balance | splitNumber }} 万元</p>
                <p class="desc">账面余额</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ accountData.in | splitNumber }} 万元</p>
                <p class="desc">累计进账</p>
              </el-col>
              <el-col :span="6">
                <p class="info">{{ accountData.out | splitNumber }} 万元</p>
                <p class="desc">累计出账</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'platformSummary',
  data() {
    return {
      area: [],
      areaId: '',
      progressData: {},
      realnameData: {},
      checkworkData: {},
      salaryData: {},
      accountData: {},
    }
  },
  computed: { ...mapState(['areasOptions']) },
  mounted() {
    this.area = [this.areasOptions[0].value]
    this.getAreaId()
  },
  methods: {
    //获取选中的区域最后一级id
    getAreaId() {
      this.areaId = this.area[this.area.length - 1]
      this.getProgressData()
      this.getRealnameData()
      this.getCheckworkData()
      this.getSalaryData()
      this.getAccountData()
    },
    // 项目进度情况
    getProgressData() {
      return this.axios
        .get(
          '/api-s/cs/projectstats/base/hrprojectstatus?areaId=' + this.areaId
        )
        .then((res) => {
          if (!res.data.hasError) {
            this.progressData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 实名制用工情况
    getRealnameData() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrrealname?areaId=' + this.areaId)
        .then((res) => {
          if (!res.data.hasError) {
            this.realnameData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 实名制考勤情况
    getCheckworkData() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrattendance?areaId=' + this.areaId)
        .then((res) => {
          if (!res.data.hasError) {
            this.checkworkData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 工资发放情况
    getSalaryData() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hrsalary?areaId=' + this.areaId)
        .then((res) => {
          if (!res.data.hasError) {
            this.salaryData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 专户资金情况
    getAccountData() {
      return this.axios
        .get('/api-s/cs/projectstats/base/hraccoutaccass?areaId=' + this.areaId)
        .then((res) => {
          if (!res.data.hasError) {
            this.accountData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  margin-top: 10px;
  background-color: #fff;
  .top {
    height: 40px;
    border-bottom: 1px solid #e3e7e9;
    padding: 0 16px;
    .title {
      display: inline-block;
      width: 180px;
      line-height: 40px;
      color: #333;
      font-size: 16px;
      font-weight: 700;
    }
    /deep/.el-cascader {
      float: right;
      .el-input__inner {
        height: 39px;
        border: none;
        font-size: 14px;
        color: #409eff;
        text-align: right;
        font-weight: 700;
        padding-right: 35px;
      }
      .el-input__suffix {
        height: 39px !important;
      }
      .el-input__icon {
        line-height: 40px;
      }
    }
  }
  .detailBox {
    padding: 16px;
    .elRow {
      height: 134px;
      margin-top: 10px;
    }
    .elCol {
      height: 100%;
    }
    .subBox {
      height: 100%;
      border: 1px solid rgba(219, 219, 219, 1);
      .title {
        height: 40px;
        font-size: 14px;
        color: #333333;
        font-weight: 700;
        line-height: 40px;
        padding-left: 10px;
        &::before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-top: -2px;
          margin-right: 10px;
        }
      }
      .detail {
        height: calc(100% - 40px);
        text-align: center;
        .info {
          font-size: 18px;
          color: #333333;
          font-weight: 600;
          margin-top: 18px;
        }
        .desc {
          font-size: 14px;
          color: #333333;
          font-weight: 400;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
>
